<!--
 * @Author: ChunLai
 * @Date: 2022-08-23 20:25:41
 * @LastEditTime: 2025-09-05 08:48:49
 * @Description: 百年销售人员告知书
 * @FilePath: \02.bldinsure\src\views\healthy\selfies\BaiNian.vue
-->
<template>
  <div class="agent-notice-bainian">
    <h2>可回溯情况销售人员告知书</h2>
    <div class="md1">投保单号: {{ orderNum }}</div>
    <div class="tips mt10">请销售人员告知：（以下问题均必填）</div>
    <div class="md2 mt10">
      <p class="title-p">
        一、本单投保人、被保险人、受益人是否本公司保险从业人员？
      </p>
      <div class="mt10"></div>
      <van-radio-group
        v-model="submitInfo.IsInsider"
        direction="horizontal"
        icon-size="14px"
        checked-color="#ee0a24"
      >
        <van-radio name="Y" shape="square">是</van-radio>
        <van-radio name="N" shape="square">否</van-radio>
      </van-radio-group>
      <div class="input-main mt10" v-if="submitInfo.IsInsider === 'Y'">
        工号：
        <div class="input-box">
          <input
            class="md-input"
            type="text"
            placeholder="请输入工号"
            v-model="submitInfo.AgentCode"
            @input="formatRule('AgentCode')"
          />
        </div>
      </div>
    </div>
    <div class="md2 mt10">
      <p class="title-p">
        二、本单投保人、被保险人、受益人与本公司保险从业人员存在以下哪种关系：
      </p>
      <div class="mt10"></div>
      <van-radio-group
        v-model="submitInfo.InsiderRelation"
        direction="horizontal"
        icon-size="14px"
        checked-color="#ee0a24"
      >
        <van-radio
          :name="item.keyId"
          shape="square"
          v-for="item in relationList"
          :key="item.keyId"
        >
          {{ item.text }}
        </van-radio>
      </van-radio-group>
      <div class="mt10">若1-7项打√，请告知存在亲属关系的保险从业人员</div>
      <template
        v-if="submitInfo.InsiderRelation && submitInfo.InsiderRelation !== '8'"
      >
        <div class="input-main mt10">
          姓名：
          <div class="input-box">
            <input
              class="md-input"
              type="text"
              placeholder="请输入姓名"
              v-model="submitInfo.Name"
              @input="formatRule('Name')"
            />
          </div>
        </div>
        <div class="input-main mt10">
          工号：
          <div class="input-box">
            <input
              class="md-input"
              type="text"
              placeholder="请输入工号"
              v-model="submitInfo.RelAgentCode"
              @input="formatRule('RelAgentCode')"
            />
          </div>
        </div>
      </template>
    </div>
    <div class="md2 mt10" v-if="agentInfo.provinceNo === '410000'">
      <p class="title-p">三、本单销售人员是否通过录音录像方式记录销售过程？</p>
      <div class="mt10"></div>
      <van-radio-group
        v-model="submitInfo.IsVideo"
        direction="horizontal"
        icon-size="14px"
        checked-color="#ee0a24"
      >
        <van-radio name="Y" shape="square">是</van-radio>
        <van-radio name="N" shape="square">否</van-radio>
      </van-radio-group>
    </div>

    <FooterBtns btnNum="1" @saveForm="nextStep"></FooterBtns>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "BainianAgentNotice",
  data() {
    return {
      submitInfo: {
        IsInsider: "",
        AgentCode: "",
        IsVideo: "",
        InsiderRelation: "",
        RelAgentCode: "",
        Name: "",
      },
    };
  },
  computed: {
    ...mapGetters({
      agentInfo: "agent/agentInfo",
      tbrPrvinCapital: "insert/tbrPrvinCapital",
      selfInsuredShipRegions: "dictionary/selfInsuredShipRegions",
    }),
    relationList() {
      let reslist = [];
      if (this.selfInsuredShipRegions.length > 0) {
        const findType = this.selfInsuredShipRegions.find((ele) =>
          ele.province.includes(this.tbrPrvinCapital)
        );
        if (findType) {
          reslist = findType.ship;
        }
      }
      return reslist;
    },
    isShareHealthy() {
      let res = false;
      if (this.$getDataFromUrl("share") == "1") {
        res = true;
      }
      return res;
    },
  },
  created() {
    this.getEchoHealthy();
  },
  methods: {
    getEchoHealthy() {
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: {
            ...this.apiComParams,
            type: "3",
          },
          apiName: "queryImparts",
        })
        .then((data) => {
          if (
            data.code == "1" &&
            data.imparts &&
            Object.keys(data.imparts).length > 0
          ) {
            this.submitInfo = Object.assign({}, this.submitInfo, data.imparts);
          }
        });
    },
    formatRule(type) {
      this.submitInfo[type] = this.submitInfo[type].replace(/\s+/g, "");
    },
    nextStep() {
      if (!this.submitInfo.IsInsider || !this.submitInfo.InsiderRelation) {
        return this.$toast("请完成以上信息作答");
      }
      if (this.submitInfo.IsInsider === "Y" && !this.submitInfo.AgentCode) {
        this.$msAlert(`第1题选择'是',请输入保险从业人员工号`);
        return;
      }
      if (
        this.submitInfo.InsiderRelation !== "8" &&
        (!this.submitInfo.Name || !this.submitInfo.RelAgentCode)
      ) {
        this.$msAlert(`第2题选择'是',请填写保险从业人员相关信息`);
        return;
      }
      if (
        this.agentInfo.provinceNo === "410000" &&
        this.submitInfo.IsVideo === ""
      ) {
        this.$msAlert("请选择是否通过录音录像方式记录销售过程");
        return;
      }
      console.log("提交");
      this.saveApiInfo();
    },
    saveApiInfo() {
      let params = {
        ...this.apiComParams,
        type: "3",
        imparts: this.submitInfo,
      };
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: params,
          apiName: "saveImparts",
          toast: true,
        })
        .then((data) => {
          if (data.code == "1") {
            if (this.isShareHealthy) {
              this.$router.replace({
                path: "/shareres?res=success",
              });
            } else {
              this.$backRouter();
            }
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.agent-notice-bainian {
  width: 100%;
  height: 100vh;
  padding: 0 14px;
  background-color: #fff;
}

h2 {
  text-align: center;
  font-size: 18px;
  line-height: 3;
}

.mt10 {
  margin-top: 10px;
}

.md1 {
  display: flex;
  justify-content: flex-end;
  line-height: 2;
}

.tips {
  font-weight: 600;
}

.md2 {
  display: flex;
  flex-direction: column;
}

.input-main {
  display: flex;
  align-items: center;
}

.input-box {
  line-height: 2;
  border-bottom: 1px solid #dadada;
  width: 80%;
}

.title-p {
  font-weight: 600;
}

.md-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-left: 4px;
  color: #323233;
  text-align: left;
  border: 0;
}
</style>
